<template>
  <div class="contacts">
    <div class="contactItem"
         v-for="(item,index) in userList"
         v-show="isShow(item)"
         @dblclick="handleContactItemDblclick(item)"
         :key="index">
      <avatar :src="item.tx" :online="item.zt==='online'"></avatar>
      <div class="contacts_content">
        <div class="contactsItem_name">{{item.xm}}({{item.dnm}})</div>
        <div class="contactsItem_info">
          <div class="qm" v-show="item.qm">{{item.qm}}(</div>
          <div class="ip">{{item.userip}}</div>
          <div class="qm" v-show="item.qm">)</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {mapState} from 'vuex'
  import Avatar from './Avatar'

  import commonUtil from '../util/commonUtil'

  export default {
    name: 'contacts',
    data () {
      return {
        showMe: false
      }
    },
    components: {
      Avatar
    },
    computed: {
      ...mapState({
        userList: state => state.userList
      })
    },
    methods: {
      isShow (item) {
        if (this.showMe) return true
        let networkInfos = commonUtil.getNetworkInfos()
        let isMe = networkInfos.some(networkInfo => networkInfo.mac === item.mac)
        return !isMe
      },
      isMe () {
      },
      handleContactItemDblclick (item) {
        // myStorage.setItem('communication', {action: 'addSession', data: item.userip})
        this.$store.dispatch('addSessionList', item.userip)
      }
    }
  }
</script>

<style scoped lang="scss">
  .contacts {
    width: 100%;
    max-height: 99%;

    .contactItem {
      /*height: 40px;*/
      box-sizing: border-box;
      padding: 10px 5px;
      font-size: 0;

      & > div {
        display: inline-block;
        /*float: left;*/
        /*margin-left: 6px;*/
      }

      &:hover {
        background: rgba(0, 0, 0, .1);
      }

      .contacts_content {
        height: 100%;
        width: calc(100% - 40px);
        box-sizing: border-box;
        padding-left: 10px;

        div {
          height: 20px;
          line-height: 20px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;

        }

        .contactsItem_name {
          font-weight: bold;
          font-size: 16px;
        }

        .contactsItem_info {
          font-size: 14px;
        }

        .contactsItem_info {
          .qm {
            display: inline-block;
          }

          .ip {
            display: inline-block;
          }
        }
      }
    }
  }
</style>
